"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/30
 */
import * as React from 'react'
import {WebViewProperties} from "react-native";
import {MyBadgeProps} from "../interface/index";
import {MyWebViewProps} from "../interface/component";
import {patchPostMessageJsCode} from "../constant";

const {View, WebView} = require('react-native');
const {connect} = require('react-redux');


class MyWebView extends React.Component<MyWebViewProps, any> {
    web: any;

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            canGoBack: false,
            canGoForward: false,
            loading: false,
            title: '',
        };
    }

    onNavigationStateChange(e) {
        // console.log('onNavigationStateChange',e);

        // this.setState({...e});
        this.props.onNavigationStateChange && this.props.onNavigationStateChange(e);
    }

    onMessage(e, m) {
        // console.log('onMessage',e.nativeEvent);
        if (this.props.onMessage) {
            this.props.onMessage(e.nativeEvent)
        }

    }

    onLoadEnd(e) {
        // console.log('onLoadEnd',e.nativeEvent);
        this.setState({...e.nativeEvent});
        this.props.onLoadEnd && this.props.onLoadEnd(e);
    }

    render() {
        return (
            <View style={{display: 'flex', flex: 1}}>
                <WebView style={[{display: 'flex', flex: 1}, this.props.style]}
                         injectedJavaScript={patchPostMessageJsCode}
                         javaScriptEnabled
                         domStorageEnabled
                         onNavigationStateChange={this.onNavigationStateChange.bind(this)}
                         onMessage={this.onMessage.bind(this)}
                         onLoadEnd={this.onLoadEnd.bind(this)}
                         {...this.props}
                />
            </View>
        );
    }
}

export default MyWebView;